Introduction
Now that you’re familiar with Angular, let’s combine it with .NET! And what a powerful combination that is. The limit of what you can build using these two is only the limit of your imagination. We will be creating two separate applications: An Angular front-end and a C# Web Api. The front-end will call the api, similarly to what you’ve done before in our Shifts Logger project.
Requirements
- This is an application where you should record your consumption of coffee.
- You can choose something else to track, in case you're not a coffee person.
- You should create two projects: A.NET WebApi and an Angular app.
- You can choose whatever database solution you want: Sqlite, SQL server or whatever you're comfortable with.
- You can choose whatever ORM you want: Dapper, EF, ADO.NET.
- You should have a filter functionality, so I can select records per date.
- Your database should have a single 'Records' table.The objective is to focus on Angular, so we should avoid the complexities of relational data.
- You CANNOT use Angular Material.
Resources
- Microsoft Docs: Web Api
- Angular Docs: Tour of Heroes Beginner’s Tutorial
- Angular CRUD Tutorial
- Angular + C# Web Api Youtube Tutorial
- Dealing With CORS (Cross Origin Resource Sharing)
Since this is your first full-stack Angular project, make sure you look up everything you don’t know. Try not to let any keyword, method or concept left-behind. This is the moment to build your foundation. And don’t forget to reach out on our Discord community if you have questions!
What you'll learn
- Your main objective is to call your API from the Angular App. Everything else is just moving data around and styling.
- There are two ways to approach the construction of this app: Finishing the API first and then building the UI, or building each method end-to-end (ex: GetAllRecords method in the back-end plus list of records in the front-end). Choose one and stick to it.
- Don't use Angular Material (a library for styling) in this project. Angular alone can be challenging enough and adding a rich library early on might overwhelm you. Also, you'll appreciate Angular Material more if you built applications without it first.
Review Repository
https://github.com/TheCSharpAcademy/CodeReviews.Angular.CoffeeTracker
Log in to mark this article as read and save your progress.